<template>
<div>
  <div>
    <el-table
      :data="goodsList"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-row>
              <el-col :span="24" v-for='g in props.row.goods_set' :key="g.id">
                <el-form-item  >
                  <span>{{ g.name }}</span>
                </el-form-item>Î
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="分类名称"
        prop="name">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete( scope.row.id )">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="修改分类"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form :model="editForm"  ref="editFormRef" label-width="70px">
        <el-form-item label="分类名称">
          <el-input v-model="editForm.name" ></el-input>
          <el-input v-model="editForm.id"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
    </el-dialog>



  </div>
</div>
</template>

<script>
export default {
  name: "catedu",
  data() {
    return {
      catelist: [],
      goodsList:[],
      // 控制修改用户对话框的显示与隐藏，默认为隐藏
      editDialogVisible: false,
      // 查询到的用户信息对象
      editForm: {},
      row_data:[]


    }
  },
  methods:{
    getCateList(){
      //发起axios请求
      this.$axios.get('cate/')
        .then(resp=>{
          console.log(resp.data)
          this.goodsList = resp.data
          // if(res.data.code == 200){
          //     this.catelist = res.data.catelist
          // }

        })
    },
    handleEdit(row){
      this.row_data = row
      this.editForm = row
      this.editDialogVisible = true

    },
    editUserInfo () {
      // 发起修改用户信息的数据请求

      var id = this.editForm.id

      this.$axios.put('cates/'+id,this.editForm).then(res=>{
        console.log(res)
        // 关闭对话框
        this.editDialogVisible = false

        // 提示修改成功
        this.$message.success('更新用户信息成功！')
      })

    },
    handleDelete(id){

      this.$axios.delete('cates/'+id,this.editForm)
      .then(resp=>{
        console.log(resp.data)
        this.$message.success('删除成功！')
        this.getCateList()
      })
    }
  },
  created() {
    this.getCateList();
  }
}
</script>

<style scoped>

</style>
